<template>
  <div>
    <h1>组件通信: 1. 父子 2. 跨多级</h1>
    <hr />
    <Son :count="count" @change-count="changeCount" />
  </div>
</template>

<script>
import { provide, ref } from 'vue'
import Son from './son.vue'
export default {
  components: {
    Son
  },
  setup () {
    const count = ref(1)
    const mky = ref(1e6)
    // 跨多级组件共享数据
    provide('mky', mky)

    // 1. 父组件准备回调函数
    /**
     * childValue 子组件传递的值
     */
    const changeCount = (childValue) => {
      count.value = childValue
    }
    return { count, changeCount }
  }
}
</script>

<style lang="scss" scoped>
</style>
